<template>
  <div class="message-page">
    <h2>消息中心</h2>
    <div class="message-list">
      <el-empty v-if="messages.length === 0" description="暂无消息" />
      <el-timeline v-else>
        <el-timeline-item
          v-for="msg in messages"
          :key="msg.id"
          :timestamp="msg.time"
          :type="msg.type">
          <el-card>
            <h4>{{ msg.title }}</h4>
            <p>{{ msg.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Message',
  setup() {
    const messages = ref([
      {
        id: 1,
        title: '系统通知',
        content: '欢迎使用智能家居系统',
        time: '2024-01-20 10:00',
        type: 'success'
      },
      {
        id: 2,
        title: '设备警告',
        content: '客厅空调温度异常，请检查',
        time: '2024-01-19 15:30',
        type: 'warning'
      },
      {
        id: 3,
        title: '系统更新',
        content: '系统已更新到最新版本',
        time: '2024-01-18 09:15',
        type: 'info'
      }
    ])

    return {
      messages
    }
  }
}
</script>

<style scoped>
.message-page {
  padding: 20px;
}

.message-list {
  margin-top: 20px;
}

.el-timeline-item {
  margin-bottom: 20px;
}

.el-card {
  margin-top: 10px;
}

h4 {
  margin: 0;
  margin-bottom: 10px;
}

p {
  margin: 0;
  color: #666;
}
</style> 